<template>
  <!-- 饼图 -->
  <div
    class="Radar"
    :id="eleId"
    :style="{ width: width + 'px', height: height + 'px' }"
  ></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "Radar",
  props: {
    eleId: String,
    width: { type: Number, default: 500 }, //宽度
    height: { type: Number, default: 250 }, //高度
    color: {
      type: Array,
      default: () => {
        return ["#00DCFF", "#00A1FF", "#007CC4", "#FFBB00", "#D94141"];
      },
    }, //颜色
    background: { type: String, default: "#010d3a" },
    source: {
      type: Array,
      default: () => {
        return [
          { value: 3, name: "type1" },
          { value: 12, name: "type2" },
          { value: 8, name: "type3" },
          { value: 5, name: "type4" },
        ];
      },
    }, //是否显示图例
    radius: {
      type: Array,
      default: () => {
        return ["0%", "100%"];
      },
    }, // 是否空心
    roseType: { type: String, default: "radius" }, // 是否凸出
    legend: { type: Boolean, default: false },
    title: { type: String, default: "" },
    remark: { type: String, default: "" },
    titlePosi: {
      type: Array,
      default: () => {
        return ["top", "left%"];
      },
    },
  },
  data() {
    return {
      options: {},
    };
  },
  mounted() {
    this.checkDomExist();
  },
  methods: {
    setOption() {
      this.options = {
        title: {
          text: this.title,
          subtext: this.remark,
          top: this.titlePosi[0],
          left: this.titlePosi[1],
          padding: 0,
          // textStyle: this.provideTitleTextStyle,
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          show: this.legend,
          bottom: "5%",
          left: "center",
        },
        color: this.color,
        series: [
          {
            name: "访问来源",
            type: "pie",
            center: ["50%", "50%"],
            radius: this.radius ? this.radius : null,
            // eslint-disable-next-line vue/no-mutating-props
            data: this.source.sort(function (a, b) {
              return a.value - b.value;
            }),
            roseType: this.roseType,
          },
        ],
      };

      let chartDom = document.getElementById(this.eleId);
      let myChart = echarts.init(chartDom);
      myChart.setOption(this.options);
    },
    checkDomExist() {
      if (this.eleId === undefined) {
        alert("请指定的eleId");
        return;
      }
      let chartDom = document.getElementById(this.eleId);
      if (chartDom !== null) {
        this.setOption();
      } else {
        // 如果取不到DOM，过会儿重试
        setTimeout(() => {
          this.checkDomExist();
        }, 200);
      }
    },
  },
};
</script>

<style scoped></style>
